<template>
	<view class="mine-content">
		<view class="top-image">
			<image src="../../static/image/bj.png" mode="widthFix"></image>
			<view style="width: 100%;height: 180rpx; background-color: #fff; margin-top: -10rpx;"></view>
		</view>
		<view class="person-body">
			<view class="user-info">
				<view class="user-avatar" @click="gotoLogin">
					<u-avatar :src="userInfo.avatar_format" size='large'></u-avatar>
				</view>
				<view class="user-detail">
					<!-- <view class="ID-level">
						<view>{{userInfo.id}}</view>
						<view>普通会员</view>
					</view> -->
					<view>{{userInfo.nickname || '未登录'}}</view>
				</view>
			</view>
			<view class="user-money">
				<view class="money-left">
					<view class="left-title">我的房源</view>
					<view class="seeAll" @click="gotoMyHouse(0)">
						<view>查看全部</view>
						<image src="../../static/image/right.png" mode=""></image>
					</view>
				</view>
				<view class="house-menu">
					<view class="house-item" @click="gotoMyHouse(0)">
						<image src="../../static/image/mymenu1.png" mode=""></image>
						<view>审核中</view>
					</view>
					<view class="house-item" @click="gotoMyHouse(1)">
						<image src="../../static/image/mymenu2.png" mode=""></image>
						<view>未通过</view>
					</view>
					<view class="house-item" @click="gotoMyHouse(2)">
						<image src="../../static/image/mymenu3.png" mode=""></image>
						<view>展示中</view>
					</view>
					<view class="house-item" @click="gotoMyHouse(3)">
						<image src="../../static/image/mymenu4.png" mode=""></image>
						<view>已下架</view>
					</view>
				</view>
			</view>
			<view class="menu-list">
				<view class="menu-item" v-for="item in menuList" :key="item.name" @click="gotoNav(item.url)">
					<view class="item-left">
						<image :src="item.image" mode=""></image>
						<view>{{item.name}}</view>
					</view>
					<view class="item-right">
						<view>{{item.phone}}</view>
						<image src="../../static/image/right.png" mode="heightFix"></image>
					</view>
				</view>
			</view>
		</view>
		<Tabbar :tabbarCurrent="tabbarCurrent"></Tabbar>
	</view>
</template>

<script>
	import {
		getUserInfo
	} from "@/api/login.js"
	export default {
		data() {
			return {
				userInfo: {
					name: '178****8888'
				},
				tabbarCurrent: 2,
				menuList: [{
						image: '../../static/image/my1.png',
						name: '我的二手车',
						url: '/pages/myUserdCar/index'
					},
					{
						image: '../../static/image/my2.png',
						name: '修改密码',
						url: '/pages/updatePwd/index'
					},
					{
						image: '../../static/image/my3.png',
						name: '联系我们',
						phone: '0851-888888',
						url: ''
					},
					{
						image: '../../static/image/my4.png',
						name: '关于平台',
						url: '/pages/setupInfo/index'
					},
					{
						image: '../../static/image/my5.png',
						name: '退出登录',
						url: 'logout'
					},
				]
			}
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			gotoLogin(){
				uni.reLaunch({
					url:'/pages/login/login'
				})
			},
			getUserInfo(){
				getUserInfo().then(res=>{
					console.log(res,'用户信息');
					this.userInfo = res.data
					uni.setStorageSync('userInfo', res.data)
				})
			},
			gotoMyHouse(current) {
				uni.navigateTo({
					url: '/pages/myHouseResources/index?current=' + current
				})
			},
			gotoNav(url) {
				if (url == '') {
					uni.makePhoneCall({
						phoneNumber: '0851-888888' //仅为示例
					});
					return
				}
				if(url == 'logout'){
					uni.clearStorageSync('App-Token')
					uni.clearStorageSync('userInfo')
					uni.setStorageSync('isLogin',false)
					uni.reLaunch({
						url:'/pages/login/login'
					})
				}
				uni.navigateTo({
					url
				})
			},
			gotoChart(url) {
				uni.navigateTo({
					url: `/pages/${url}/index`
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
		min-height: 100vh;
	}

	.top-image {
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: -1;

		>image {
			width: 100%;
		}
	}

	.personalCenter-main {
		position: relative;
	}

	.person-body {
		position: absolute;
		top: 40px;
		width: 100%;

		.user-info {
			color: #fff;
			display: flex;
			width: 90%;
			margin: 0 auto;
			font-size: 32rpx;

			.user-avatar {
				margin-right: 20rpx;
			}

			.user-detail {
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.ID-level {
					display: flex;

					>view:nth-child(2) {
						font-size: 20rpx;
						background-color: rgb(120, 182, 248);
						padding: 5rpx 10rpx;
						border-radius: 25rpx;
						margin-left: 10rpx;
						line-height: 35rpx;
					}
				}
			}
		}

		.user-money {
			width: 90%;
			margin: 0 auto;
			background-color: #fff;
			margin-top: 30rpx;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			border-radius: 25rpx;
			box-shadow: 1px 1px 15px 2px rgba(6, 0, 1, 0.1);

			.money-left {
				flex: 2;
				display: flex;
				// flex-direction: column;
				justify-content: space-between;
				border-right: 2rpx solid #F5F5F5;
				color: #666666;

				.seeAll {
					font-size: 22rpx;
					display: flex;
					align-items: center;

					>image {
						margin-left: 10rpx;
						width: 12rpx;
						height: 23rpx;
					}
				}
			}

			.house-menu {
				display: flex;
				justify-content: space-between;
				margin-top: 40rpx;
				text-align: center;

				.house-item {
					font-size: 26rpx;

					image {
						margin-bottom: 10rpx;
						width: 52rpx;
						height: 52rpx;
					}
				}
			}
		}
	}

	.menu-list {
		margin-top: 60rpx;
		background-color: #fff;

		>view:not(:last-child) {
			border-bottom: 1rpx solid #E4E4E4;
		}

		.menu-item {
			width: 95%;
			margin: 0 auto;
			padding: 30rpx 0;
			display: flex;
			justify-content: space-between;
			line-height: 40rpx;

			.item-left {
				display: flex;

				>image {
					margin-right: 10rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}

			.item-right {
				display: flex;

				>image {
					margin-top: 5rpx;
					margin-left: 10rpx;
					width: 20rpx;
					height: 30rpx;
				}
			}
		}
	}
</style>